<template>
<div class="container">

<div class="comment_wrap">

    <div class="comment_item" v-for="(item,index) in commentList" :key="index">
        
        <div class="info">
            <div class="cover">
                <b style="color:#fb7299">|</b> 
                <!-- 有的用户是没有信息的，而有的用户有信息但是有没有头像，所以这里判断两个 -->
                <img :src="item.userinfo.user_img" alt="" v-if="item.userinfo&&item.userinfo.user_img">
                <img src="@/assets/cover.jpg" alt="" v-else>
            </div>
            <p class="nickname" v-if="item.userinfo"> {{item.userinfo.name}}</p>
            <p class="nickname" v-else> 匿名用户</p>
            <p class="createTime">{{item.comment_date}}</p>
        </div>

            <div class="content">
                {{item.comment_content}}
                <span class="publish" @click="publishReply(item.comment_id)">回复</span>

            </div>
        
        <comment-item :commentChild="item.child" @postPublish="publishReply"></comment-item>

    </div>

</div>
    
    
    

</div>
</template>

<script>

   import commentItem from "./commentItem.vue"

export default {
    data() {
        return {
           commentList:null
        };
    },
    

    methods: {

        //获取评论
       async getComment(){
           const res = await this.$http.get('/comment/'+ this.$route.params.id)
           
           if(res.data){
               this.$emit("lengthSelect",res.data.length)
           }
           this.commentList = this.commentFabiao(res.data)
       },

        //评论的递归样式。
       commentFabiao(data){

           function fn(temp){
                let arr1 = []

                for(var i = 0; i<data.length;i++){
                    if(data[i].parent_id == temp){
                        arr1.push(data[i])   //评论的内容，评论级别由参数 temp 决定，为null 时就保存一级评论内容，为1 时就继续保存二级的内容
                        
                        //这里传参。当i=0时。传入索引值为0的comment_id，然后执行fn方法。
                        //执行fn方法后，在判断时，如果当前的parent_id（回复id） == 传入的 comment_id,那么把内容保存到arr1
                        //最后在这里继续添加child,嵌套child 数据。（一级评论添加下一级别的数据）
                        data[i].child = fn(data[i].comment_id)
                    }
                    
                }
                return arr1
            }
            return fn(null)
       },

        //回复评论
       publishReply(id){
        //    console.log(id);
        this.$emit("publishClick",id)
           
       }



    },
    components:{
        commentItem
    },
    created(){
        this.getComment()
    }


    }
</script>


<style scoped lang="less">

.container{
    background-color: #fff;

   .comment_item{
       background-color: #fff;
       border-bottom: 0.533vw solid #fb7299;
       padding-bottom: 4vw;
       padding-top: 2.667vw;
       
       .info{
           display: flex;
           height: 10.667vw;
           width: 100%;
           justify-content: center;
           align-items: center;
           background-color: #fff;

           .cover{
               flex: 1;
               display: flex;
               justify-content: center;
                align-items: center;
                
               img{
                   width: 10.133vw;
                    height: 10.133vw;
                    border-radius: 50%;
               }
           }
           .nickname{
               flex: 4;
               font-size: 5.333vw;
               margin: 0;
               font-weight: 570;
           }

           .createTime{
               flex: 1;
               font-size: 4.8vw;
               color: #747474;
           }
       }

       .content{
           font-size: 3.467vw;
           padding-left: 30px;
           font-size: 20px;
           padding-right: 2.133vw;
           text-indent: 1em;

            .publish{
                color: red;
                position: absolute;
                right:0;
                font-size: 18px;
                padding-right: 10px;
            }  
       }
   }

 }


</style>